<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前后端交互</title>
	</head>
	<body>
		<div id="app">
			<table id="tab1" border="1px" width="80%" align="center">
				<tr align="center" height="60%">
					<th colspan="5">用户列表</th>
				</tr>
				<tr align="center" height="60%">
					<th>编号</th>
					<th>名称</th>
					<th>年龄</th>
					<th>性别</th>
					<th>操作</th>
				</tr>
				<!-- 4.遍历数据实现表格获取 -->
				<tr align="center" v-for="user in userList">
					<td v-text="user.id"></td>
					<td v-text="user.name"></td>
					<td v-text="user.age"></td>
					<td v-text="user.sex"></td>
					<td>
						<button >修改</button>
						<button @click="deleteUserById(user.id)">删除</button>
					</td>
				</tr>
			</table>
		</div>
		
		<script src="../js/vue.js"></script>
		<script src="../js/axios.js"></script>
		<script>
			axios.defaults.baseURL = "http://localhost:8090"
			const app = new Vue({
				el: '#app',
				data: {
					userList: []
				},
				methods: {
					//1.定义远程数据的axios请求
					getUserList(){
						axios.get("/findAll")
						.then(result => {
							this.userList = result.data
						
						})
					},
					deleteUserById(id){
						//常规写法
						// axios.delete("http://localhost:8090/user/"+id)
						//模板字符串写法
						axios.delete(`/user/${id}`)
							.then(result => {
								console.log(result.data)
								//刷新页面
								this.getUserList()
							})
					},
					
				},
				//生命周期函数
				created() {
					//触发axios函数调用
					this.getUserList()
				}
			})
		
		
		
		
		</script>
		
	</body>
</html>
